  <template>
  <div class="main" v-for="(item, index) in answerlist" :key="index">
    <el-card class="box-card topcard">
      <div class="left">
        <div class="info">
          <img :src="defurl" />
          <div>{{ item?.name }}</div>
          <span class="time">创建时间{{ dataFormat(item.createAt) }}</span>
        </div>
      </div>
      <div class="essay">
        <h2>{{ item?.title }}</h2>
        <el-container>
          <el-main>
            <div class="main-text" @click="read" v-html="item?.text"></div>
          </el-main>
        </el-container>
      </div>
      <div class="trail">
        <el-button @click="applaud1(item.essay.uid, item.essay.userid)"
          ><template #icon
            ><el-icon :class="isprimary1 == true ? 'z-icon' : ''"
              ><CaretTop /></el-icon></template
          ><span>赞同</span></el-button
        >
        <el-button v-if="is(item.type)" @click="acceptclick(item.answer)"
          >采纳回答</el-button
        >
        <el-button
          :color="!isprimary == true ? '#e5efff' : '#0066ff'"
          class="z"
          @click="applaud"
          ><template #icon>
            <el-icon :class="isprimary == true ? 'z-icon' : ''"
              ><CaretBottom
            /></el-icon> </template
        ></el-button>
        <div class="function">
          <ul>
            <!-- <li>{{ 1 }} 条评论</li> -->
            <li v-for="(item, index) in tdata" :key="index">{{ item }}</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template> 
    
    <script >
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";

import LocalCache from "../../../utils/cache";
import dataFormat from "../../../utils/dateFormat";
// import { useStore } from "vuex";
export default defineComponent({
  components: {},
  props: {
    answerlist: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const store = useStore();
    const route = useRoute();
    console.log(props.answerlist[0], "数据");
    const tdata = ["分享", "收藏", "喜欢"];
    const defurl = require("@/assets/images/log.png");
    const { userid } = { ...props.answerlist[0] };
    const userids = LocalCache.getCache("id");
    const isbut = ref(userid == userids);
    console.log(userid, userids, isbut.value, "userids");
    const is = (type) => {
      if (type == 1) {
        if (type == isbut.value) {
          return true;
        }
      }
      return false;
    };
    console.log(is(1), "type");

    const acceptclick = (id) => {
      console.log("用户点击了采纳回答", id);
      store.dispatch("answer/setaccept", { id, answer: route.query.id });
    };
    return { defurl, tdata, dataFormat, acceptclick, isbut, is };
  },
});
</script> 
    
    <style scoped lang="less">
.main {
  width: 693px !important;
  margin-bottom: 10px;
  .topcard {
    border-top: 0;
    .left {
      .info {
        display: flex;
        align-items: center;
        > img {
          width: 50px;
          height: 30px;
        }
        .time {
          color: #9ca5b6;
          margin-left: 10px;
        }
      }
    }
    .essay {
      > h2 {
        margin-top: 0;
        margin-left: 50px;
      }
      > h2:hover {
        color: #175199;
        cursor: pointer;
      }
      .label {
        width: 40px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: relative;
        top: 33px;
        left: 5px;
      }
      .islabel {
        background-color: #fde8e6;
        color: #f9afa9;
      }
      .isarticle {
        background-color: #e5efff;
        color: #0066ff;
      }
    }
    .main-text {
      display: flex;
      > span:hover {
        cursor: pointer;
        color: #646464;
      }
      > button {
        display: inline;
        padding: 0;
        margin-left: 0px;
        color: #175199 !important ;
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
      }
      .main-text-bt {
        color: #094a8b;
        &.main-text-bt:hover {
          color: #929292;
        }
      }
    }
  }
  /deep/.trail {
    display: flex;
    .function {
      margin-left: 30px;
      > ul {
        display: flex;
        text-align: center;
        padding: 0;
        margin: 0;
        > li {
          color: #a3abbc;
          position: relative;
          display: block;
          height: 30px;
          line-height: 30px;
          margin-left: 20px;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
    .el-button {
      .el-icon {
        color: #0066ff;
      }
      > span {
        color: #0066ff;
      }
    }
    .z {
      margin-left: 5px;
    }
    .z-icon {
      color: #f8f5f5 !important;
    }
  }
}
.themehead {
  > img {
    width: 190px;
    height: 105px;
  }
}
</style>
    